<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NoteBook</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <div class="app">
    <div class="side">
      <nav class="left-topbar topbar"><span>个人中心</span></nav>
      <div class="profile">
        <div class="face">
          <img src="http://q1.qlogo.cn/g?b=qq&nk=1104886256&s=640">
        </div>
        <div class="userName">姓名</div>
        <div class="emailAddress"><a href="mailto:1234567890@email.com">1234567890@email.com</a></div>
        <div class="functions">
          <div class="btn btn-gray btn-circle">
            <i class="fas fa-cog"></i>
          </div>
          <div class="btn btn-gray btn-circle">
            <i class="fas fa-envelope"></i>
            <div class="red-point">2</div>
          </div>
          <div class="btn btn-gray btn-circle">
            <i class="fas fa-bell"></i>
            <div class="red-point">3</div>
          </div>
        </div>
        <div class="showMore">
          展开显示动态消息
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
    </div>
    <main class="notes">
      <nav class="right-topbar topbar">
        <div class="search">
          <i class="fas fa-search"></i>
          <input type="text" name="example" placeholder="请输入...">
        </div>
        <div class="switchSource">
          <div class="btn btn-long active">邮箱</div>
          <div class="btn btn-long">日历</div>
        </div>
      </nav>
      <div class="noteWapper">
        <div class="noteList">
          <div class="bookName"><span>记事本</span></div>
          <div class="noteItems">
            <div class="noteItem">
              <p>
                <img id="IDN" src="http://cdn.amanaimages.com/preview640/07800022109.jpg" alt="" srcset="">
                我不知道为什么设计图中有这样一张图片,并且图片还被跨行显示了, Anyway, 先按照设计图做了
              </p>
            </div>
            <div class="noteItem">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore sint, tenetur neque
                vitae eligendi aperiam magni hic eum eius dolorum iure facilis tempora, maxime consequuntur quam minima
                ad? Ad, cupiditate?</p>
            </div>
            <div class="noteItem">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore sint, tenetur neque
                vitae eligendi aperiam magni hic eum eius dolorum iure facilis tempora, maxime consequuntur quam minima
                ad? Ad, cupiditate?</p>
            </div>
            <div class="noteItem">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore sint, tenetur neque
                vitae eligendi aperiam magni hic eum eius dolorum iure facilis tempora, maxime consequuntur quam minima
                ad? Ad, cupiditate?</p>
            </div>
            <div class="noteItem">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore sint, tenetur neque
                vitae eligendi aperiam magni hic eum eius dolorum iure facilis tempora, maxime consequuntur quam minima
                ad? Ad, cupiditate?</p>
            </div>
            <div class="noteItem">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore sint, tenetur neque
                vitae eligendi aperiam magni hic eum eius dolorum iure facilis tempora, maxime consequuntur quam minima
                ad? Ad, cupiditate?</p>
            </div>
            <div class="noteItem">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore sint, tenetur neque
                vitae eligendi aperiam magni hic eum eius dolorum iure facilis tempora, maxime consequuntur quam minima
                ad? Ad, cupiditate?</p>
            </div>
            <div class="noteItem">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore sint, tenetur neque
                vitae eligendi aperiam magni hic eum eius dolorum iure facilis tempora, maxime consequuntur quam minima
                ad? Ad, cupiditate?</p>
            </div>
            <div class="noteItem">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore sint, tenetur neque
                vitae eligendi aperiam magni hic eum eius dolorum iure facilis tempora, maxime consequuntur quam minima
                ad? Ad, cupiditate?</p>
            </div>
            <div class="noteItem">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore sint, tenetur neque
                vitae eligendi aperiam magni hic eum eius dolorum iure facilis tempora, maxime consequuntur quam minima
                ad? Ad, cupiditate?</p>
            </div>
          </div>
          <div class="noteOption">
            <div class="btn btn-long">添加 <i class="fas fa-plus"></i></div>
          </div>
        </div>
        <div class="noteDetail">
          <div class="dirPathWapper">
            <div class="dirPaths">
              <div class="dirPath ">收件箱</div>
              <div class="dirPath subPath">已发送</div>
            </div>
          </div>
          <div class="noteContentWapper">
            <div class="senderInfo">
              <div class="senderFace">
                <img src="http://q1.qlogo.cn/g?b=qq&nk=1104886256&s=640">
              </div>
              <div class="senderUser">
                <div class="sendName">Emily</div>
                <div class="sendTime">
                  <time datetime="2020-08-14 10:37">
                    2020年8月14日 星期五 上午10:37
                  </time>
                </div>
              </div>
            </div>
            <div class="content">
              <address class="sender-column">
                <p>
                  中国北京市门头沟区，102300<br />
                  纽臂大学 纽臂科学院<br />
                  <strong>李雷</strong> 教授<br />
                  <strong>联系电话：</strong>123-456-7890<br />
                  <strong>电子邮件：</strong>no_reply@example.com<br />
                  <br />
                  <time datetime="2019-02-22">2019 年 2 月 22 日</time><br />
                </p>
              </address>

              <address>
                <p>
                  <strong>韩梅梅 女士</strong><br />
                  中国海南省三亚市亚龙湾<br />
                </p>
              </address>
              <section>
                <h1>回复：韩梅梅学位申请</h1>
                <p>
                  亲爱的韩同学：
                  <br />
                  感谢你申请纽臂大学科学院的哲学博士学位课程，下面我将就你的问题依次做出解答。
                </p>
              </section>
              <section>
                <h2>开学日期</h2>
                <p>
                  欢迎你在任意时间来校学习，但在学期开始时来校更理想，每学期开学时间如下：
                  <ul>
                    <li>第一学期：<time datetime="2019-09-09">2019 年 9 月 9 日</time></li>
                    <li>第二学期：<time datetime="2020-01-15">2020 年 1 月 15 日</time></li>
                    <li>第三学期：<time datetime="2020-05-02">2020 年 5 月 2 日</time></li>
                  </ul>
                  请告诉我你是否愿意在学期开始时来校，并告知你选择的学期。
                  <br>
                  你可以在我们的网站上找到更多关于 <a href="https://example.com/">学校重要日期</a> 的信息。
                </p>
              </section>
              <section>
                <h2>学习科目</h2>
                <p>
                  纽臂科学院本着兼容并蓄的原则，课题涉及一些科技领域。欢迎有才智、态度专注的研究人员参加，也欢迎符合我们价值观的朋友加入。我们最感兴趣的课题如下（按优先度排序）：
                  <ol>
                    <li>把水（H<sub>2</sub>O）转变为酒的方法，以及白藜芦醇（C<sub>14</sub>H<sub>12</sub>O<sub>3</sub>）对健康的帮助作用。</li>
                    <li>测量室温 30°C（86°F）时，观众人数呈指数级增加对放克贝斯手表演的影响（3 × 10<sup>3</sup> > 3 × 10<sup>4</sup> 效应）。</li>
                    <li>使用 <abbr title="超文本标记语言(HyperText Markup Language)">HTML</abbr> 和 <abbr
                        title="层叠样式表（Cascading Style Sheets）">CSS</abbr> 构建乐谱。</li>
                  </ol>
                  请针对上述课题提供更多的信息。包括研究时长、所需资源，以及其它未尽事宜，谢谢。
                </p>
              </section>
              <section>
                <h2>异域舞蹈</h2>
                <p>
                  你说的没错！异域部落舞蹈是我博士后研究项目的一部分。为了回答你的问题，我在下面列出我个人最喜欢的舞蹈种类和相关介绍：
                  <dl>
                    <dt>波利尼西亚小鸡舞</dt>
                    <dd>一种古老、神秘但影响广泛的舞蹈，可追溯至公元前 300 年，整个村庄围绕着一个小鸡形状的圈跳舞，祈祷牲畜肥美。</dd>
                    <dt>冰岛布尔曳步舞</dt>
                    <dd>在冰岛人学会用火取暖之前，他们之间流行着这种舞蹈，舞蹈时人们在地上拥成一个圈，用极小极快的动作晃动身体。我有一个学生说冰岛曳步舞是现代甩臀舞的鼻祖。</dd>
                    <dt>北极机器人舞</dt>
                    <dd>一个有趣的历史误传，二十世纪六十年代的英国探险者宣称发现了一种像“机器人跳舞”的舞蹈，这种舞蹈动作僵硬，流行于加拿大和阿拉斯加北部地区。后来人们发现这里的居民是因为天气太冷了才做出这样的动作。
                      更多信息请查看我的<a href="https://example.com/">异域舞蹈研究</a>网页。</dd>
                  </dl>
                </p>
              </section>
              <footer>
                <p>
                  李雷 教授
                </p>
                <blockquote>
                  纽臂大学校训：人人皆可纽臂 —— <cite>诸葛中天传</cite>
                </blockquote>
              </footer>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>

</html>